<template>
  <div class="info">
    <div class="top">
      <el-button @click="back" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <IconBack></IconBack>
        </template>
        返回作业列表
      </el-button>
      <div class="title" >
        {{ workName }}
      </div>
      <el-button @click="save" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconSave></iconSave>
        </template>
        保存
      </el-button>
      <el-button @click="submit" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconSubmit></iconSubmit>
        </template>
        提交
      </el-button>
      <el-button @click="routerMark" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconSubmit></iconSubmit>
        </template>
        查看AI测评总结及教师评价
      </el-button>
    </div>

    <div v-loading="loading">
    <div v-for="question in qAnswer.list" :key="question.questionId">

    <el-row gutter="5">
    <el-col :span="15">
     <el-card  style="max-width: 100%;margin-top: 30px;" v-if="question.type==1">  
      <template #header>  
        <div class="card-header">  
          <span>题目：{{ question.questionContent }}</span>  
        </div>  
      </template> 

      <el-upload  
        class="upload-demo"  
        drag  
        action="/api/student/common/upload"
        :data="{questionId:question.questionId}"
        :file-list="question.files"
        :on-preview="handlePreview"  
        :on-success="(response, file) => successPreview(response, file, question.questionId)"  
        limit="1"
        :on-exceed="oneFile" 
        :on-remove="(file, fileList) => handleRemove(file, fileList, question.questionId)"
        :headers="headers"
      >  
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>  
        <div class="el-upload__text">  
          <em>点击上传</em>  
        </div>  
        <template #tip>  
          <div class="el-upload__tip">  
            文件上传不能超过50MB  
          </div>  
        </template>  
      </el-upload>

     </el-card>  
     <el-card  style="max-width: 100%;margin-top: 30px;" v-else-if="question.type==0">  
      <template #header>  
        <div class="card-header">  
          <span>题目{{ question.serialNumber }} : <br>{{ question.questionContent }}</span>  
        </div>  
      </template>  
      <el-input
        v-model="question.content"
        :autosize="{ minRows: 5, maxRows: 20 }"
    type="textarea"
    placeholder="请输入"
           />
     </el-card>  
    </el-col>

    <el-col :span="9"> 
      <el-card style="max-width: 100%;margin-top: 30px;overflow-wrap: break-word;" v-if="question.aiScore!=null&&question.scoreAnaly!=null&&question.total!=null">  
      <template #header>  
        <div class="card-header">  
          <span>AI得分:<text style="margin-left: 10px;margin-right:5px ;color: #2994FF;">{{ question.aiScore }}</text>/<text style="margin-left: 5px;color: #529b2e;"> {{ question.total }} </text></span>  
        </div>  
      </template>  
      <span><text style="margin-right:5px ;color: #722ED1;">得分分析:</text><br>{{ question.scoreAnaly }}</span>
    </el-card> 
  </el-col>
    </el-row>
    </div>
  </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import IconBack from '../../../assets/back.vue';
import iconSave from '../../../assets/save.vue';
import iconSubmit from '../../../assets/submit.vue';
import {useRouter,useRoute} from 'vue-router';
import { ElLoading, UploadFile, UploadFiles } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue';  
import { ElMessage, UploadProps } from 'element-plus';  
import { saverTaskListAPI , queryTaskListAPI,subListAPI,deleteFileAPI} from '../../../api/student/work'
import { useTokenStore } from '../../../utils/token.js'
 //添加token
 const tokenStore = useTokenStore();
 const headers = ref({
  Authentication: tokenStore.token
 })
const loading = ref(false)

const router=useRouter()
const {params,query}=useRoute()
const workName=ref(query.workName as String)
//路由拿到taskId,markId
const data = ref({
  taskId:Number(query.workId),
  taskName:String(query.workName)
})

onMounted(async()=>{
  console.info(data.value)
  let result = await queryTaskListAPI(data.value.taskId)
  qAnswer.value.list=result.data.data
  console.info(qAnswer.value.list)

})

// 题目数组，每个题目都有一个唯一的id和名称  
const qAnswer = ref({
  taskId:0,
  type:0,
  taskName:"",
  list:[
  { id: 1,questionId:0, questionContent: '题目1',aiScore:"32",scoreAnaly:"题目1得分分析",content:"" ,type:1,serialNumber:1,total:33, files: [{ name: "好", url: "" }]},  
  { id: 2, questionId:0,questionContent: '题目2' ,aiScore:"22",scoreAnaly:"题目2得分分析",content:"" ,type:0,serialNumber:3,total:33, files: [{ name: "", url: "" }]},  
  { id: 3, questionId:0,questionContent: '题目3',aiScore:"7",scoreAnaly:"题目3得分分析" ,content:"" ,type:0,serialNumber:2,total:33, files: [{ name: "", url: "" }]}
  ]
})

const oneFile: UploadProps['onPreview'] = (file) => {  
  ElMessage.error("只允许上传一个文件")
};  

const handleRemove = async(uploadFile:UploadFile, uploadFiles:UploadFiles,questionId:number) => {
  console.log(uploadFile, uploadFiles,questionId)
  await deleteFileAPI(questionId)
  ElMessage.success("删除成功")
}

const handlePreview: UploadProps['onPreview'] = async(file) => {  
  console.log(file);  
};  
  
const successPreview = (response: any, file: any, questionId: number) => { 
  console.log(response)
if (response.msg) {  
  
  const filePath = response.msg;
 
  // 根据 questionId 找到对应的题目对象
  const question = qAnswer.value.list.find(question => question.questionId === questionId);

// 如果找到了题目对象，则更新其 content 字段
if (question) {
  question.content = filePath;
} else {
  ElMessage.error('未找到对应的题目ID!');
}
    ElMessage.success('上传成功!');  
  } else {  
    ElMessage.error('上传失败!');  
  }  
};  
const queryTask =async()=>{
  const result = await queryTaskListAPI(data.value.taskId)
  qAnswer.value.list=result.data.data

}
const back=()=>{
  console.log("点击了返回按钮")
  router.go(-1)
}

const save=async()=>{
  console.log("点击了保存按钮")
  //设置操作类型
  qAnswer.value.type=0
  qAnswer.value.taskId=data.value.taskId
  console.log(data.value.taskId)
  qAnswer.value.taskName=data.value.taskName
  await saverTaskListAPI(qAnswer.value)
  queryTask()
  ElMessage.success("保存成功")
  // })

}

const submit=async()=>{
  console.log("点击了提交按钮")
  loading.value=true
  //设置操作类型
  qAnswer.value.taskId=data.value.taskId
  qAnswer.value.taskName=data.value.taskName

  const rf = await subListAPI(qAnswer.value)
  if(rf!=null){
    loading.value=false
  }
  queryTask()
  ElMessage.success("AI测评成功")
  // router.push('/st-home/studyPlace/workResult')
}

const routerMark=async()=>{
  console.log("查看AI测评总结及教师评价")
router.push({
  path:'/st-home/studyPlace/workResult',
  query:{
    taskId:Number(query.workId)
  }
})
  }
</script>
<style scoped>
.info{
  width: 100%;
  height: 88%;
}
.top{
  padding-top: 1%;
  width: 100%;
  height: 6%;
  display: flex;
}
.main{
  width: 100%;
  height: 92%;
  margin-top: 1%;
}
.title{
  height: 100%;
  background-color: rgba(226, 226, 226, 0.596);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 2%;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: break-word;
  border: solid rgba(226, 226, 226, 0.596);
  border-radius:6px;
  box-shadow: var(--el-box-shadow-light);
}
.answer{
  width: 100%;
  height: 60%;
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.404);
  border-left: 1.5px solid rgba(77, 76, 76, 0.404);
  border-right: 1.5px solid rgba(77, 76, 76, 0.404);
  
}
.operation{
  width: 100%;
  height: 15%;
}
.answer-one{
  width: 100%;
  height: 85%;
}
</style>